<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/government/supervision' }"
      >巡查列表</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0">
      <div style="width: 100%">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <div class="obj_bt_box" style="display: flex; align-items: center">
              <div class="box_label">机构名称：</div>
              <div class="box_value" style="margin-right: 200px">
                {{ fromdata.areaName }}
              </div>
              <div class="box_label">状态：</div>
              <div class="box_value">
                {{
                  options3.find((item) => item.value === fromdata.status).label
                }}
              </div>
            </div>
            <div class="obj_bt_box" style="display: flex; align-items: center">
              <div class="box_label">类型：</div>
              <div class="box_value">
                {{
                  options2.find((item) => item.value === fromdata.type).label
                }}
              </div>
            </div>
            <div
              class="obj_bt_box"
              style="display: flex; align-items: baseline"
            >
              <div class="box_label" style="width: 100px">问题描述：</div>
              <div class="box_value">
                <div v-html="fromdata.problemDescription" />
                <!-- <m-edit ref="wEdit_ass1" style="width: 60%;" :htmldata="textarea" :is-disabled="false" /> -->
              </div>
            </div>
            <div class="obj_title">机构反馈</div>
            <div
              class="obj_bt_box"
              style="display: flex; align-items: baseline"
            >
              <div class="box_label" style="width: 100px">内容：</div>
              <div class="box_value">
                <m-edit
                  ref="wEdit_ass2"
                  style="width: 60%"
                  :htmldata="textarea1"
                  :is-disabled="fromdata.status === 1"
                />
              </div>
            </div>
            <div class="obj_bt_box" style="display: flex; align-items: center">
              <div class="box_label" style="width: 100px">图片：</div>
              <div class="box_value">
                <el-upload
                  style="position: relative; min-height: 148px"
                  action="/api/system/upload1"
                  list-type="picture-card"
                  :auto-upload="true"
                  accept="image/*"
                  :file-list="fileListShow"
                  :on-success="handleFileSuccess"
                  :before-upload="handleBefore"
                  :disabled="fromdata.status === 1"
                >
                  <i slot="default" class="el-icon-plus" />
                  <div slot="file" slot-scope="{ file }">
                    <img
                      style="height: 148px"
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span
                      class="text"
                      style="
                        display: block;
                        max-width: 148px;
                        word-break: break-all;
                      "
                    >{{ file.name }}</span>
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in" />
                      </span>
                      <span
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download" />
                      </span>
                      <span
                        v-if="fromdata.status !== 1"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="cad-box flex-card"
      style="margin: 20px 0; justify-content: space-evenly"
    >
      <el-button
        v-if="fromdata.status !== 1"
        type="warning"
        @click="handleSubmit"
      >提 交</el-button>
    </div>
  </div>
</template>

<script>
import {
  supervisionAndReportingGetById,
  supervisionAndReportingFeedback
} from './api'
import MEdit from './components/MEdit'
import fileImage from '@/assets/file_image.png'
export default {
  components: {
    MEdit
  },
  data () {
    return {
      textarea: '2222222222222222222222222',
      textarea1: '',
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      fileImage,
      fileListShow: [],
      fromdata: {},
      dataObj: {
        name1: '长沙市雨花区托育综合服务中心',
        name2: '湖南省长沙市雨花区香樟路255号',
        name3: '未处理',
        name4: '儿童走失',
        name5: '李通、张三',
        name6: '二级',
        name7: '没有查到离园信息'
      },

      options2: [
        {
          value: 1,
          label: '安全'
        },
        {
          value: 2,
          label: '卫生'
        },
        {
          value: 3,
          label: '环境'
        },
        {
          value: 9,
          label: '其他'
        }
      ],
      options3: [
        {
          value: 0,
          label: '未整改'
        },
        {
          value: 1,
          label: '整改中'
        },
        {
          value: 2,
          label: '已整改'
        }
      ],
      tableData: []
    }
  },
  created () {
    const { id } = this.$route.query
    this.idS = id
    this.handleSupervisionAndReportingGetById()
  },
  mounted () {},
  methods: {
    async handleSupervisionAndReportingGetById () {
      const res = await supervisionAndReportingGetById(this.idS)
      this.fromdata = res
      if (this.fromdata.status === 1) {
        this.textarea1 = this.fromdata.institutionalProblemDescription
        this.fromdata.institutionalPhoto = JSON.parse(
          this.fromdata.institutionalPhoto
        )
        this.fileListShow = this.fromdata.institutionalPhoto.map(
          (item, index) => {
            return {
              uid: index,
              url: item.url,
              name: item.name
            }
          }
        )
      }
    },
    async handleSubmit () {
      console.log(this.$refs.wEdit_ass2)
      await supervisionAndReportingFeedback({
        id: this.fromdata.id,
        institutionalPhoto: JSON.stringify(this.fileList),
        institutionalProblemDescription: this.$refs.wEdit_ass2.html
      })
      this.$message.success('提交成功')
      this.$router.push('/government/supervision')
    },
    handleRemove (file) {
      console.log(file)
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
      this.fileListShow = this.fileListShow.filter(
        (item) => item.uid !== file.uid
      )
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file.url, '_blank')
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    },
    handleFileSuccess (response, file, fileList) {
      this.fileList.push({
        uid: file.uid,
        name: response.data.originalName,
        url: response.data.url,
        uploadFile: response.data.url
      })
      let fileExtension = response.data.url.split('.').pop() // 获取文件后缀
      fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.originalName,
          url: response.data.url,
          uploadFile: response.data.url
        })
      } else {
        this.fileListShow.push({
          uid: file.uid,
          name: response.data.originalName,
          url: fileImage,
          uploadFile: response.data.url
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  border: 1px solid #c0ccda;
  border-radius: 10px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  border: none !important;
  height: auto !important;
}
::v-deep .el-upload--picture-card {
  position: absolute;
  right: -148px;
  top: 0;
}
::v-deep .el-upload-list--picture-card {
  display: flex !important;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  .obj_bt_box {
    width: 100%;
    .box_label {
    }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
